﻿@model IEnumerable<Blog>
@{
    ViewData["Title"] = "Enter";
}
<!-- Full Front page Area -->
<div class="page-front container">
    <!-- style this ul element with only grid-boxes and not with flip-menu or masonry-grids. -->
    <ul class="grid-boxes list-unstyled flip-menu row" id="masonry-grids">
        <!-- data-cell to remember order -->
        <li class="grid-item col-md-2" data-cell="1">
            <div class="col-wrap user-pic">
                <img src="img/user-pic.jpg" alt="user-pic">
            </div>
        </li>
        <li class="grid-item col-md-8" data-cell="2">
            <div class="col-wrap user-short-info">
                <h2 class="head">Enter's HomePage. <span> .net,go!</span></h2>

                <div class="float-right">
                    <span class="cv-btn"><a href="#non" class="elegant-eleganticons-98">分享</a></span>
                    <ul class="socials list-unstyled">
                        <li><a href="#non" class="elegant-eleganticons-242"></a></li>
                        <li><a href="#non" class="elegant-eleganticons-241"></a></li>
                        <li><a href="#non" class="elegant-eleganticons-251"></a></li>
                        <li><a href="#non" class="elegant-eleganticons-249"></a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="grid-item col-md-2" data-cell="3">
            <div class="col-wrap blog-box">
                <a asp-controller="Blog" asp-action="Index" class="elegant-eleganticons-75" title="博客">
                    博客
                </a>
            </div>
        </li>

        <li class="grid-item col-md-2" data-cell="4">
            <div class="col-wrap about-box">
                <a href="#about-page" class="elegant-eleganticons-316" data-flip-menu="true">关于我们</a>
            </div>
        </li>
        <li class="grid-item col-md-8" data-cell="5">
            <!-- Featured Posts -->
            <div class="col-wrap featured-post">
                <div id="owl-carousel">
                    @foreach (var blog in Model)
                    {
                        <div class="post-1">
                            <div class="left col-md-5 col-sm-5 col-xs-4">
                                <img src="~/img/featured/post-1.jpg" alt="featured-post">
                            </div>
                            <div class="right col-md-7 col-sm-7 col-xs-8">
                                <h3 class="head">@blog.Title</h3>
                                <p class="desc">@blog.Content</p>
                                <div class="bottom">
                                    <!-- <time datetime="2014-04-20" class="pub-date">20<sup>th</sup> March 2014</time> -->
                                    <a asp-controller="Blog" asp-action="Detail" asp-route-id="@blog.Id" class="more-btn" title="博客">
                                        Read More
                                    </a>
                                </div>
                            </div>
                        </div><!-- End Post 1 -->
                    }

                    <div class="post-2">
                        <div class="left col-md-5 col-sm-5 col-xs-4">
                            <img src="~/img/featured/post-2.jpg" alt="featured-post">
                        </div>
                        <div class="right col-md-7 col-sm-7 col-xs-8">
                            <h3 class="head">Cool Kitten</h3>
                            <p class="desc">Aenean sollicitudin, lorem quis endum auctor, nisi elit consequat ipsum, nece sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit beti sei repudiandae sint et molestiae. Sed non neque elit sit amet a augue...</p>
                            <div class="bottom">
                                <time datetime="2014-04-20" class="pub-date">20<sup>th</sup> March 2014</time>
                                <a asp-controller="Blog" asp-action="Detail" class="more-btn" title="博客">
                                    Read More
                                </a>
                            </div>
                        </div>
                    </div> <!-- End Post 2 -->
                </div> <!-- End Owl Carousel -->
                <div class="featured-pagination">
                    <span class="back elegant-eleganticons-2"></span>
                    <span class="next elegant-eleganticons-3"></span>
                </div>
            </div>
        </li>
        <li class="grid-item col-md-2" data-cell="6">
            <div class="col-wrap works-box">
                <a href="#portfolio-page" class="elegant-eleganticons-328" data-flip-menu="true">赞誉</a>
            </div>
        </li>
        <li class="grid-item col-md-2" data-cell="7">
            <div class="col-wrap resume-box">
                <a href="#resume-page" class="elegant-eleganticons-71" data-flip-menu="true">技巧</a>
            </div>
        </li>
        <li class="grid-item col-md-2" data-cell="8">
            <div class="col-wrap contact-box">
                <a href="#contact-page" class="elegant-eleganticons-110" data-flip-menu="true">联系我们</a>
            </div>
        </li>
    </ul>
</div> <!-- End Page-front -->
<!-- Start Page Contents -->
<div class="page-contents">
    <!-- Start About Page -->
    <div class="about-page inner-pages" id="about-page">
        <div class="short-bio parallax">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <!-- cause there is only 1 column -->
                        <h3 class="title">Who are we?</h3>
                        <p>
                            We are <strong>MyOrange Inc.,</strong> uis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.
                        </p>
                        <p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
                        <br>
                        <ul class="info-boxes row list-unstyled">
                            <li class="col-md-4 col-sm-4 col-xs-4">
                                <span class="top">Established</span>
                                <span class="bottom">20-04-1988</span>
                            </li>
                            <li class="col-md-4 col-sm-4 col-xs-4">
                                <span class="top">Company</span>
                                <span class="bottom">IT Firm</span>
                            </li>
                            <li class="col-md-4 col-sm-4 col-xs-4">
                                <span class="top">Location</span>
                                <span class="bottom">TORONTO</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div> <!-- End Container -->
        </div> <!-- End Short-bio -->

        <div class="container">
            <div class="services">
                <h3 class="title">Services</h3>
                <ul class="row list-unstyled">
                    <li class="col-md-4">
                        <h4><span class="icon elegant-eleganticons-105"></span>Iphone App Development</h4>
                        <p>
                            Aenean sollicin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus perio vitae erat.
                        </p>
                    </li>
                    <li class="col-md-4">
                        <h4><span class="icon elegant-eleganticons-52"></span>Search Engine Optimization</h4>
                        <p>
                            Aenean sollicin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus perio vitae erat.
                        </p>
                    </li>
                    <li class="col-md-4">
                        <h4><span class="icon elegant-eleganticons-104"></span>Web Development</h4>
                        <p>
                            Aenean sollicin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus perio vitae erat.
                        </p>
                    </li>
                </ul>
            </div> <!-- End Services -->

            <div class="workflow">
                <h3 class="title">Our Workflow</h3>
                <ul class="circles list-unstyled">
                    <li class="elegant-eleganticons-101">Think<span class="arrow elegant-eleganticons-3"></span></li>	<!-- Think -->
                    <li class="elegant-eleganticons-324">Design<span class="arrow elegant-eleganticons-3"></span></li>  <!-- Design -->
                    <li class="elegant-eleganticons-318">Code<span class="arrow elegant-eleganticons-3"></span></li> 	<!-- Code -->
                    <li class="elegant-eleganticons-315">Test<span class="arrow elegant-eleganticons-3"></span></li>	<!-- Test -->
                    <li class="elegant-eleganticons-322">Launch</li>	<!-- Launch -->
                </ul>
            </div>
        </div>
    </div> <!-- End About Page -->
    <!-- Start Skills Page -->
    <div class="resume-page inner-pages" id="resume-page">
        <div class="banner parallax">
            <h2 class="title">Our records</h2>
            <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum.</p>
            <a href="#non" class="download-btn">Download Company History</a>
        </div>
        <div class="container">
            <div class="timeline row">
                <div id="timeline-carousel">

                    <div class="col-md-4 item">
                        <!-- Ist -->
                        <div class="top">
                            <span class="time">May 2004</span>
                            <span class="title">B.Tech, M.I.T</span>
                            <span class="rhombus elegant-eleganticons-113"></span>
                        </div>
                        <div class="bottom">
                            <p class="info">Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis vulputate cursus.</p>
                        </div>
                    </div>

                    <div class="col-md-4 item">
                        <!-- 2nd -->
                        <div class="top">
                            <span class="time">June 2008</span>
                            <span class="title">M.Tech, M.I.T.</span>
                            <span class="rhombus elegant-eleganticons-113"></span>
                        </div>
                        <div class="bottom">
                            <p class="info">Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis vulputate cursus.</p>
                        </div>
                    </div>

                    <div class="col-md-4 item">
                        <!-- 3rd -->
                        <div class="top">
                            <span class="time">September 2009</span>
                            <span class="title">Company, Designation</span>
                            <span class="rhombus elegant-eleganticons-127"></span>
                        </div>
                        <div class="bottom">
                            <p class="info">Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis vulputate cursus.</p>
                        </div>
                    </div>

                    <div class="col-md-4 item">
                        <!-- 3rd -->
                        <div class="top">
                            <span class="time">October 2012</span>
                            <span class="title">Freelancer</span>
                            <span class="rhombus elegant-eleganticons-127"></span>
                        </div>
                        <div class="bottom">
                            <p class="info">Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id.</p>
                        </div>
                    </div>
                </div> <!-- End Timeline Carousel -->
            </div> <!-- End Timeline -->
            <!-- Skills -->
            <div class="skills">
                <h3 class="title">Skills</h3>
                <div class="row">
                    <div class="col-md-6 skill-type-1">
                        <div class="row">
                            <ul class="labels col-md-4 list-unstyled">
                                <li>HTML (85%)</li>
                                <li>CSS (85%)</li>
                                <li>JavaScript (80%)</li>
                                <li>PHP (90%)</li>
                            </ul>
                            <div id="circular-skills" class="circular-skills col-md-8">
                                <!-- To add more skills , provide more span's -->
                                <span data-percent="85" data-skills-color="#2196F3">HTML</span>
                                <span data-percent="85" data-skills-color="#1E88E5">CSS</span>
                                <span data-percent="80" data-skills-color="#1E88E5">JavaScript</span>
                                <span data-percent="90" data-skills-color="#1565C0">PHP</span>
                            </div>
                        </div> <!-- End Inner Row -->
                    </div>
                    <div class="col-md-6 skill-type-2">
                        <ul class="meters list-unstyled">
                            <li>Wordpress<span>70%</span></li>
                            <li>Print Templates<span>95%</span></li>
                            <li>Spanish<span>80%</span></li>
                            <li>After Effects<span>75%</span></li>
                            <li>Illustrator<span>90%</span></li>
                        </ul>
                    </div>
                </div> <!-- End Row -->
            </div> <!-- End Skills -->
        </div> <!-- End Container -->
    </div> <!-- End Skills page -->

    <div class="portfolio-page inner-pages" id="portfolio-page">
        <div class="banner parallax">
            <h2 class="title">Portfolio</h2>
            <p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue.</p>
        </div>
        <div class="container">
            <ul class="row filter-nav list-unstyled" id="filter-nav">
                <li class="filter-current"><a href="#" data-filter="*">All</a></li>
                <li><a href="#" data-filter=".print">Print</a></li>
                <li><a href="#" data-filter=".design">Web Design</a></li>
                <li><a href="#" data-filter=".illustration">Illustration</a></li>
            </ul>

            <ul class="row filter-port list-unstyled" id="filter-port">
                <li class="item print col-md-4 col-sm-6">
                    <figure>
                        <img src="img/port/port-1.png" alt="placeholder-img">
                        <div class="overlay">
                            <a href="https://dribbble.com/phob" class="elegant-eleganticons-137 btn" rel="external" target="_blank"></a>
                        </div>
                        <figcaption class="caption">
                            <h3>Mickey Mouse <span>by Petr Stefek</span></h3>
                        </figcaption>
                    </figure>
                </li>
                <li class="item design col-md-4 col-sm-6">
                    <figure>
                        <img src="img/port/port-3.jpg" alt="placeholder-img">
                        <div class="overlay">
                            <a href="img/popups/pop-1.jpg" class="elegant-eleganticons-99 btn image-popup" title="Illustration by Robert Richter"></a>
                        </div>
                        <figcaption class="caption">
                            <h3>Quitting Time<span>Illustration by Robert Richter</span></h3>
                        </figcaption>
                    </figure>
                </li>
                <li class="item illustration col-md-4 col-sm-6">
                    <figure>
                        <img src="img/port/port-2.png" alt="placeholder-img">
                        <div class="overlay">
                            <a href="img/popups/pop-2.jpg" class="elegant-eleganticons-99 btn image-popup" title="Small Caption Here"></a>
                        </div>
                        <figcaption class="caption">
                            <h3>Lemmings<span>Small Caption Here</span></h3>
                        </figcaption>
                    </figure>
                </li>
                <li class="item illustration col-md-4 col-sm-6">
                    <figure>
                        <img src="img/port/port-4.jpg" alt="placeholder-img">
                        <div class="overlay">
                            <a href="https://vimeo.com/13776542?autoplay=false?title=0&amp;byline=0&amp;portrait=0" class="elegant-eleganticons-130 btn video-popup" title="Video on Animation"></a>
                        </div>
                        <figcaption class="caption">
                            <h3>Polygon Character<span>Illustration by Matthew Reily</span></h3>
                        </figcaption>
                    </figure>
                </li>
                <li class="item illustration col-md-4 col-sm-6">
                    <figure>
                        <img src="img/port/port-5.png" alt="placeholder-img">
                        <div class="overlay">
                            <a href="https://dribbble.com/Creativedash" class="elegant-eleganticons-137 btn" rel="external" target="_blank"></a>
                        </div>
                        <figcaption class="caption">
                            <h3>California Roll<span>Foodie Icon</span></h3>
                        </figcaption>
                    </figure>
                </li>
                <li class="item design col-md-4 col-sm-6">
                    <figure>
                        <img src="img/port/port-6.jpg" alt="placeholder-img">
                        <div class="overlay">
                            <a href="img/popups/pop-3.jpg" class="elegant-eleganticons-99 btn image-popup" title="By Jerrod Maruyama"></a>
                        </div>
                        <figcaption class="caption">
                            <h3>Clock Cleaners <span>By Jerrod Maruyama</span></h3>
                        </figcaption>
                    </figure>
                </li>
            </ul> <!-- End Portfolio Showcase -->
        </div> <!-- End Container -->
    </div> <!-- End Portfolio Page -->

    <div class="contact-page inner-pages" id="contact-page">
        <div class="banner parallax">
            <h2 class="title">Contact Us</h2>
            <p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue.</p>
        </div>
        <div class="container">
            <div class="row form-wrap">
                <!-- Contact Form -->
                <div class="col-md-6 cform">
                    <h3 class="title">Get in Touch</h3>
                    <form id="contact-form" method="post" name="contact-form" action="contact.php">
                        <div class="inputs">
                            <label for="name">Name<em>*</em></label>
                            <input type="text" id="name" name="name">
                        </div>
                        <div class="inputs">
                            <label for="email">Email<em>*</em></label>
                            <input type="email" id="email" name="email">
                        </div>
                        <div class="inputs">
                            <label for="subject">Subject</label>
                            <input type="text" id="subject" name="subject">
                        </div>
                        <div class="inputs">
                            <label for="message">Message<em>*</em></label>
                            <textarea id="message" name="message" cols="50" rows="5"></textarea>
                        </div>
                        <div class="inputs"><input type="submit" class="contact-submit" id="cform-submit" value="SEND"></div>
                        <!-- <span class="entypo-cancel form-error">Oops! Something wrong with the server.</span> -->
                    </form>
                </div>
                <!-- Contact Address -->
                <div class="col-md-6 caddress">
                    <h3 class="title">Other Details</h3>
                    <div class="details">
                        <p class="elegant-eleganticons-238">1800-900-3000</p>
                        <p class="elegant-eleganticons-110">john@doe.com</p>
                        <p class="elegant-eleganticons-132">OurORANGE INC, TORONTO - Canada</p>
                    </div>
                    <ul class="socials list-unstyled">
                        <li><a href="#non" class="elegant-eleganticons-242"></a></li>
                        <li><a href="#non" class="elegant-eleganticons-241"></a></li>
                        <li><a href="#non" class="elegant-eleganticons-251"></a></li>
                        <li><a href="#non" class="elegant-eleganticons-249"></a></li>
                        <li><a href="#non" class="elegant-eleganticons-244"></a></li>
                    </ul>
                </div> <!-- End CAddress -->
            </div> <!-- End Row Wrap -->
        </div> <!-- End Container -->
    </div> <!-- End Contact Page -->
</div>
<!-- End Page Contents -->

<nav id="inner-nav" class="inner-nav">
    <ul class="container inside-wrap list-unstyled">
        <li class="elegant-eleganticons-64 menu-btn">
            <ul class="menu-content list-unstyled">
                <li><a href="#about-page">About</a></li>
                <li><a href="#resume-page">Resume</a></li>
                <li><a href="#portfolio-page">Portfolio</a></li>
                <li><a href="#contact-page">Contact</a></li>
            </ul>
        </li>
        <li class="elegant-eleganticons-44 close-btn"></li>
    </ul>
</nav>